<template>
    <div class="content-edit">

        <el-form :model="info" label-width="120px" style="max-width: 560px">

            <el-form-item label="名称">
                <el-input class="w-50" v-model="info.name" />
            </el-form-item>

            <el-form-item label="上级分类">

                <span v-if="info.parent_id">{{ parent.name }}</span>
                <!-- <span v-if="!info.parent_id && info.id">{{ info.path_name }}</span> -->
            </el-form-item>
            <el-form-item label="图片">
                <!--
                <el-upload class="avatar-uploader" :action="VITE_URL + '/admin.fileUpload/upload2'" :show-file-list="false"
                    :on-success="uploadSuccess">
                    <img v-if="info.image" :src="VITE_URL + '/storage/' + info.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            -->

                <ImageManager v-model="info.image" :maxNumber="1"></ImageManager>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="info.sort_order" :min="0" />
            </el-form-item>
            <el-form-item label="是否推荐">
                <el-switch v-model="info.is_recommend" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <!--             
            <el-form-item label="状态">
                <el-select v-model="info.status" placeholder="选择状态">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </el-form-item> 
        -->

            <el-form-item>
                <el-button type="primary" @click="do_edit">保存</el-button>
            </el-form-item>


        </el-form>
    </div>
</template>


<script lang="ts" setup>


import { ref } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';


import ImageManager from '../../Common/image-manager.vue';
const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();

const parent: any = ref<object>({

    id: 0,

    name: '',
    path: '',
    path_name: '',
    parent_id: '',
    image: '',
    sort_order: '',
    is_recommend: 0,
});

const info: any = ref<object>({

    id: 0,

    name: '',
    path: '',
    path_name: '',
    parent_id: '',
    image: '',
    sort_order: '',
    is_recommend: 0,
});


const single = function () {

    var url = VITE_URL + '/admin.cms.category/single';

    url += '?id=' + info.value.id;
    axios.get(url).then(function (res: any) {

        info.value = res.data;
        info.value.status += ''; // 转字符串， 否则不能正常显示

        parent.value = res.data.parent?res.data.parent:null;
    });
}

const get_parent = function () {

    var url = VITE_URL + '/admin.cms.category/single';

    url += '?id=' + info.value.parent_id;
    axios.get(url).then(function (res: any) {

        parent.value = res.data;

    });
}
const init = () => {

    info.value.id = route.params.id ? route.params.id : 0;
    info.value.parent_id = route.params.parent_id ? route.params.parent_id : 0;

    if (info.value.id) {
        single();
    }
    if (info.value.parent_id) {
        get_parent();
    }
}

init();

const do_edit = () => {

    var url = VITE_URL + '/admin.cms.category/edit';
    url += '?id=' + info.value.id;

    var data: any = {
        name: info.value.name,
        parent_id: info.value.parent_id,
        sort_order: info.value.sort_order,
        // status: info.value.status,
        image: info.value.image,
        is_recommend: info.value.is_recommend,
    };

    var data_str = '';
    for (var p in data) {
        data_str += p + '=' + data[p] + '&';
    }

    axios.post(url, data_str).then((res: any) => {

        ElMessage({
            message: res.data.status == 0 ? '保存成功' : '保存失败',
            duration: 1000,
            type: res.data.status == 0 ? 'success' : 'error',
            onClose: function () {
                router.push({ path: '/main/cms/category' });
            }
        })
    });

}
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>